<script lang="ts" setup>
import { getSvg } from "@/utils";
import useChkNum from "../../hooks/useChkNum";
defineOptions({
  name: "LotStats"
});
const { handleTabClick } = useChkNum();
</script>
<template>
  <div
    class="h-220 shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)] rounded-10 bg-[url(@/assets/svg/Frame_209.svg)] bg-no-repeat bg-cover bg-center mb-14"
  >
    <div
      class="h-170 rounded-[10px_10px_0_0] pl-20 pt-30 flex flex-col justify-start items-stretch gap-y-10"
    >
      <div class="font-normal text-32 color-[#fff] lh-38 text-left not-italic">
        สถิติหวย
      </div>
      <div class="font-400 text-14 color-[#fff] lh-16 text-left not-italic">
        เช็กสถิติหวยย้อนหลังได้ที่นี่
      </div>
      <div class="flex justify-start items-center gap-x-10">
        <div
          @click="handleTabClick('Circ')"
          class="w-60 h-34 lh-34 text-center bg-[#fff] rounded-6 font-500 text-12 color-[#000] not-italic"
        >
          ตามวัน
        </div>
        <div
          @click="handleTabClick('Moon')"
          class="w-60 h-34 lh-34 text-center bg-[#fff] rounded-6 font-500 text-12 color-[#000] not-italic"
        >
          ตามเดือน
        </div>
        <div
          @click="handleTabClick('All')"
          class="w-60 h-34 lh-34 text-center bg-[#fff] rounded-6 font-500 text-12 color-[#000] not-italic"
        >
          ตามปี
        </div>
      </div>
    </div>
    <div
      class="h-50 lh-50 bg-[#D49439] rounded-[0_0_10px_10px] px-20 flex justify-between items-center"
    >
      <span class="font-500 text-14 color-[#fff] lh-16 text-left not-italic"
        >คลิกเพื่อดูรายละเอียด</span
      >
      <img class="w-7 h-13 aspect-ratio-[7/13]" :src="getSvg('Frame_597')" />
    </div>
  </div>
</template>
